<template>
  <div class="home">
   <TopView></TopView> 
   <!-- 间隔20px -->
   <div style="height:20px"></div>
   <!-- 绘制表格 -->
   <el-card class="box-card" style="marginTop;:20px">
   <el-table :data="equipmentTableData" style="width: 100%">
    <el-table-column prop="eqOrder" label="序号" width="180" />
    <el-table-column prop="eqName" label="设备名称" width="180" />
    <el-table-column prop="eqAddress" label="位置" />
    <el-table-column prop="eqType" label="类型" />
    <el-table-column prop="eqStatus" label="状态" />
    <el-table-column prop="eqSensorNmu" label="传感器总数" />
    <el-table-column prop="CData" label="C级数据" />
    <el-table-column prop="DWarnning" label="D级报警" />
    <el-table-column prop="offLineReport" label="离线报告" />
    <el-table-column prop="time" label="时间" />
    <el-table-column prop="operation" label="操作" fixed="right">
    <template #default>
        <el-button link type="primary" size="small" @click="checkDeviceDetails"
          >查看详情</el-button
        >
      </template>
    </el-table-column>
  </el-table>
   <!-- 间隔20px -->
  <div style="height:20px"></div>
  <!-- 定义分页的组件 -->
  <el-pagination
      v-model:current-page="eqpagination.current"
      v-model:page-size="eqpagination.pageSize"
      :page-sizes="[5, 10, 15, 20]"
      background
      layout="total, sizes,->, prev, pager, next, jumper"
      :total="40"
    />
</el-card>
   </div>
</template>
<!-- <el-pagination
:current-page="page"
:total="total"
:page-size="limit"
:page-sizes="[5, 10, 20, 30]"
style="padding: 20px 0;"
layout="prev, pager, next, jumper, ->, sizes, total"
@current-change="getRoles"
@size-change="getRoles(1, $event)"
/> -->

<script lang="ts">
export default {
  name: 'Home',
}
</script>
<script lang="ts" setup>
import TopView from './components/TopView/index.vue'
import {  useRouter } from 'vue-router'
const router = useRouter()
//设备的表格数据
const equipmentTableData = [
  {
    eqOrder:'待添加',
eqName:'待添加',
eqAddress:'待添加',
eqType:'待添加',
eqStatus:'待添加',
eqSensorNmu:'待添加',
CData:'待添加',
DWarnning:'待添加',
offLineReport:'待添加',
time:'待添加',
operation:'待添加',
  }
]
//设备的分页数据
const eqpagination={
current:1,
pageSize:5,
page:5,

}
//查看设备详情的函数
 const checkDeviceDetails=()=>{
  router.push({ path: '/home/deviceDetails'})
 }
</script>

<style lang="less" scoped>
.home{
  width: 100%;
  height: 100%;
}
</style>
